<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			起始：<input type="text" v-model="start"/><br />
			终点：<input type="text" v-model="end"/>
			<div>您购买的票为：{{dist}}</div>
			<!-- 计算属性基于data中现有的属性为基础构建的 -->
			<!-- 当计算属性被多次调用时，该get方法仅仅被调用了一次 -->
			<!-- get调用的时刻：1、初次读取时。2、当内容发生改变时 -->
			
			<!-- 计算属性的优势：计算属性相比较methods具有缓存机制，方便复用，且调试更加方便 -->
			<div>您购买的票为：{{dist}}</div>
			<div>您购买的票为：{{dist}}</div>
			<div>您购买的票为：{{dist}}</div>
			<div>您购买的票为：{{dist}}</div>
		</div>
	</body>
	<script>
		new Vue({
			el:'#root',
			data(){
				return {
					start:'重庆西',
					end:'贵阳北'
				}
			},
			computed:{
				//切记dist并不是一个对象，而是一个被加工的属性
				dist:{
					// 当有人读取dist时，get会被调用，返回值就作为dist的值
					// vm._data中没有计算属性，计算属性最终会出现在vm上，直接可以读取。
					get(){
						return this.start + "-" + this.end
					},
					//set只有当内容被修改时，才能调用
					//计算属性的改变，并不能引起全局的改变。
					set(value){
						console.log('set',value)
					}
				}
			}
		})
	</script>
</html>